<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <title>天气数据分析可视化</title>
    <meta content="Responsive admin theme build on top of Bootstrap 4" name="description">

    <link href="/static/static/css/bootstrap-datepicker.min.css" rel="stylesheet">

    <!--Morris Chart CSS -->

    <link href="/static/static/css/swiper-bundle.min.css" rel="stylesheet" type="text/css">
    <link href="/static/static/css/bootstrap-datepicker.min.css" rel="stylesheet">

    <!-- DataTables -->
    <link href="/static/static/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css">
    <link href="/static/static/css/buttons.bootstrap4.min.css" rel="stylesheet" type="text/css">

    <!-- Responsive datatable examples -->
    <link href="/static/static/css/responsive.bootstrap4.min.css" rel="stylesheet" type="text/css">

    <link href="/static/static/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="/static/static/css/metismenu.min.css" rel="stylesheet" type="text/css">
    <link href="/static/static/css/icons.css" rel="stylesheet" type="text/css">
    <link href="/static/static/css/style.css" rel="stylesheet" type="text/css">

</head>

<body>

<div class="header-bg">
    <!-- Navigation Bar-->
    <header id="topnav">
        <div class="topbar-main">
            <div class="container-fluid">

                <!-- Logo-->
                <div>
                    <a href="" class="logo">
                        {#                            <img src="/static/static/picture/logo-dark.png" class="logo-lg" alt="" height="22">#}
                        <h3>天气数据分析可视化</h3>
                    </a>
                </div>
                <!-- End Logo-->

                <div class="menu-extras topbar-custom navbar p-0">

                    <!-- Search input -->
                    <div class="search-wrap" id="search-wrap">
                        <div class="search-bar">
                            <input class="search-input" type="search" placeholder="Search">
                            <a href="#" class="close-search toggle-search" data-target="#search-wrap">
                                <i class="mdi mdi-close-circle"></i>
                            </a>
                        </div>
                    </div>

                    <ul class="navbar-right ml-auto list-inline float-right mb-0">


                        <li class="dropdown notification-list list-inline-item d-none d-md-inline-block">
                            <a class="nav-link waves-effect" href="#" id="btn-fullscreen">
                                <i class="fas fa-expand noti-icon"></i>
                            </a>
                        </li>
                        <li class="dropdown notification-list list-inline-item d-none d-md-inline-block">
                            <a class="nav-link waves-effect" href="#" id="btn-fullscreen">
                                <h5 style="color: #ccc">
                                    {{ userInfo.username }}
                                </h5>
                            </a>
                        </li>
                        <!-- notification -->

                        <li class="dropdown notification-list list-inline-item">
                            <div class="dropdown notification-list nav-pro-img">
                                <a class="dropdown-toggle nav-link arrow-none waves-effect nav-user"
                                   data-toggle="dropdown" href="#" role="button" aria-haspopup="false"
                                   aria-expanded="false">
                                    <img src="/static/static/picture/user-1.jpg" alt="user" class="rounded-circle">
                                </a>
                                <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated profile-dropdown">
                                    <!-- item-->
                                    {#                                        <a class="dropdown-item" href="#"><i class="mdi mdi-account-circle"></i> Profile</a>#}
                                    {#                                        <a class="dropdown-item" href="#"><i class="mdi mdi-wallet"></i> My Wallet</a>#}
                                    {#                                        <a class="dropdown-item d-block" href="#"><span class="badge badge-success float-right">11</span><i class="mdi mdi-settings"></i> Settings</a>#}
                                    {#                                        <a class="dropdown-item" href="#"><i class="mdi mdi-lock-open-outline"></i> Lock screen</a>#}
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item text-danger" href="/myApp/logOut/"><i
                                            class="mdi mdi-power text-danger"></i> 退出登录</a>
                                </div>
                            </div>
                        </li>

                        <li class="menu-item dropdown notification-list list-inline-item">
                            <!-- Mobile menu toggle-->
                            <a class="navbar-toggle nav-link">
                                <div class="lines">
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                </div>
                            </a>
                            <!-- End mobile menu toggle-->
                        </li>

                    </ul>

                </div>
                <!-- end menu-extras -->

                <div class="clearfix"></div>

            </div>
            <!-- end container -->
        </div>
        <!-- end topbar-main -->


        <!-- MENU Start -->
        <div class="navbar-custom">
            <div class="container-fluid">

                <div id="navigation">

                    <!-- Navigation Menu-->
                    <ul class="navigation-menu">

                        <li class="has-submenu">
                            <a href="/userApp/index"><i class="dripicons-meter"></i> 首页</a>
                        </li>

                        <li class="has-submenu">
                            <a href="#"><i class="dripicons-user"></i> 数据分析</a>
                            <ul class="submenu">
                                <li><a href="/userApp/monthTempChar">月温度分析</a></li>
                                <li><a href="/userApp/monthAirCha">月份空气质量</a></li>
{#                                <li><a href="/userApp/CityData">城市数据分析</a></li>#}
                                <li class="has-submenu">
                                        <a href="#">城市数据分析</a>
                                        <ul class="submenu">
                                            <li><a href="/userApp/CityData">年度分析</a></li>
                                            <li><a href="/userApp/CityMonth">月份分析</a></li>
                                        </ul>
                                    </li>
                                <li><a href="/userApp/screen">历史数据大屏</a></li>
                            </ul>

                        </li>
                    
                        <li class="has-submenu">
                            <a href="/userApp/chatAI"><i class="dripicons-location"></i> 智能问答</a>
                        </li>

                        <li class="has-submenu">
                            <a href="/userApp/weather_deatil_view"><i class="dripicons-view-thumb"></i> 详情信息</a>

                        </li>
                        
                        <li class="has-submenu">
                            <a href="/userApp/predict/"><i class="dripicons-star"></i> 天气预测</a>

                        </li>
                        <li class="has-submenu">
                            <a href="/userApp/weatherforecast/"><i class=" dripicons-star"></i>天气预报</a>
                        </li>
                    </ul>
                    <!-- End navigation menu -->
                </div>
                <!-- end #navigation -->
            </div>
            <!-- end container -->
        </div>
        <!-- end navbar-custom -->
    </header>
    <!-- End Navigation Bar-->

</div>
<!-- header-bg -->

<div class="wrapper" style="padding-top: 30px">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">

                        <h4 class="mt-0 header-title">
                            条件选择
                        </h4>
                        <form action="/userApp/predict/" method="POST">
                            <div class="form-group row">
                                <label for="example-text-input" class="col-sm-2 col-form-label">日期</label>
                                <div class="col-sm-2">
                                    <select name="date" id="" class="form-control">
                                        {% for date in dateList %}
                                            <option value="{{ date }}">{{ date }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <label for="example-text-input" class="col-sm-2 col-form-label">风向</label>
                                <div class="col-sm-2">
                                    <select name="wind" id="" class="form-control">
                                        {% for i in windList %}
                                            {% if i == defaultDate %}
                                                <option name="date" selected value="{{ i }}">{{ i }}</option>
                                            {% else %}
                                                <option name="date" value="{{ i }}">{{ i }}</option>
                                            {% endif %}
                                        {% endfor %}
                                    </select>
                                </div>
                                <label for="example-text-input" class="col-sm-2 col-form-label">城市</label>

                                <div class="col-sm-2">
                                    <select name="city" id="" class="form-control">
                                        {% for i in cites %}
                                            {% if i == defaultDate %}
                                                <option name="date" selected value="{{ i }}">{{ i }}</option>
                                            {% else %}
                                                <option name="date" value="{{ i }}">{{ i }}</option>
                                            {% endif %}
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>

                            <button type="submit" class="btn btn-primary waves-effect waves-light">提交</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">

                        <h4 class="mt-0 header-title">预测结果</h4>
                        {#                            <p class="sub-title">DataTables has most features enabled by default, so all you need to do to use it with your own tables is to call the construction function: <code>$().DataTable();</code>.#}
                        </p>

                        <div id="mainOne" style="height: 270px;width: 100%;text-align: center">
                            {#                                <img src="/static/static/cloudImg/weatherCloud.png" alt="" style="height: 410px;margin-top: 35px">#}
                            {% if result %}
                                <h1 style="line-height: 230px">{{ result }}</h1>
                            {% else %}
                                <h1 style="line-height: 230px">暂无数据~</h1>
                            {% endif %}
                        </div>

                    </div>
                </div>
            </div>
            <!-- end col -->
        </div>
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">

                        <h4 class="mt-0 header-title">实际结果</h4>
                        </p>

                        <div id="mainTwo" style="height: 270px;width: 100%;text-align: center">
                            {% if weatherInfo %}
                                <h1 style="line-height: 230px">{{ weatherInfo }}</h1>
                            {% else %}
                                <h1 style="line-height: 230px">暂无数据~</h1>
                            {% endif %}
                        </div>

                    </div>
                </div>
            </div>
            <!-- end col -->
        </div>

    </div>

    <!-- end container-fluid -->
</div>
<!-- end wrapper -->

<style>
    .swiper {
        width: 100%;
        height: calc(100vh - 131px);
    }

    .swiper-slide {
        height: 100%;
    }

    .wrapper {
        padding-top: 0;
    }

    body {
        padding-bottom: 0;
    }

    html {
        overflow-x: hidden;
        position: relative;
        min-height: 100%;
    overflow-y: hidden;
    }
</style>
<!-- End Footer -->

<!-- jQuery  -->
<script src="/static/static/js/jquery.min.js"></script>
<script src="/static/static/js/bootstrap.bundle.min.js"></script>
<script src="/static/static/js/jquery.slimscroll.js"></script>
<script src="/static/static/js/waves.min.js"></script>

<script src="/static/static/js/apexcharts.min.js"></script>
<script src="/static/static/js/bootstrap-datepicker.min.js"></script>

<!-- Required datatable js -->
<script src="/static/static/js/jquery.dataTables.min.js"></script>
<script src="/static/static/js/dataTables.bootstrap4.min.js"></script>
<!-- Buttons examples -->
<script src="/static/static/js/dataTables.buttons.min.js"></script>
<script src="/static/static/js/buttons.bootstrap4.min.js"></script>
<script src="/static/static/js/jszip.min.js"></script>
<script src="https://themesdesign.in/zegva/layouts/plugins/datatables/pdfmake.min.js"></script>
<script src="https://themesdesign.in/zegva/layouts/plugins/datatables/vfs_fonts.js"></script>
<script src="/static/static/js/buttons.html5.min.js"></script>
<script src="/static/static/js/buttons.print.min.js"></script>
<script src="/static/static/js/buttons.colVis.min.js"></script>
<!-- Responsive examples -->
<script src="/static/static/js/dataTables.responsive.min.js"></script>
<script src="/static/static/js/responsive.bootstrap4.min.js"></script>

<!-- Datatable init js -->
<script src="/static/static/js/datatables.init.js"></script>
<script src="/static/static/js/echarts.js"></script>
<!-- App js -->
<script src="/static/static/js/app.js"></script>


</body>

</html>